<template>
	<view class="content">
		<!-- <image class="logo" src="/static/logo.png"></image> -->
		<view class="text-area">
			<!-- <text class="title"></text> -->
			<button type="default" @click="showPopup">普通</button>
			<button type="default"  @click="showPopup1">更改提示文字</button>
			<button type="default" @click="showPopup2">更改提示文字颜色</button>
			<button type="default"  @click="showPopup3">更改内容</button>
			<button type="default"  @click="showPopup4">更改内容颜色</button>
			<button type="default"  @click="showPopup5">更改取消按钮文字</button>
			<button type="default"  @click="showPopup6">更改确认按钮文字</button>
			<button type="default"  @click="showPopup7">更改取消按钮颜色</button>
			<button type="default"  @click="showPopup8">更改确认按钮颜色</button>
			<button type="default"  @click="showPopup9">设置跳转地址</button>
			<button type="default"  @click="showPopup10">取消回调</button>
			<button type="default"  @click="showPopup11">成功回调</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: 'Hello'
		};
	},
	onLoad() {},
	methods: {
		// 普通用法
		showPopup() {
			this.$store.dispatch('popup/open');
		},
		// 更改提示文字
		showPopup1() {
			this.$store.dispatch('popup/open',{
			  titleText:'永远少年!',
			})
		},
		// 更改提示文字颜色
		showPopup2() {
			this.$store.dispatch('popup/open',{
			  titleText:'永远少年!',
			  titleTextColor:'#ffb70b',
			  
			})
		},
		// 更改内容
		showPopup3() {
			this.$store.dispatch('popup/open',{
			  contentText:'永远少年!',
			})
		},
		// 更改内容颜色
		showPopup4() {
			this.$store.dispatch('popup/open',{
			  contentText:'永远少年!',
			  contentTextColor:'#ffb70b'
			  
			})
		},
		// 更改取消按钮文字
		showPopup5() {
			this.$store.dispatch('popup/open',{
			  closeText:'知道了'
			})
		},
		// 更改确认按钮文字
		showPopup6() {
			this.$store.dispatch('popup/open',{
			  confirmText:'好的'
			})
		},
		// 更改取消按钮颜色
		showPopup7() {
			this.$store.dispatch('popup/open',{
			   closeColor:'#ffb70b'
			})
		},
		// 更改确认按钮颜色
		showPopup8() {
			this.$store.dispatch('popup/open',{
			   confirmColor:'#ffb70b'
			})
		},
		// 设置跳转地址
		showPopup9() {
			this.$store.dispatch('popup/open',{
			  url:'/pages/home/home'
			})
		},
		// 取消回调
		showPopup10() {
			this.$store.dispatch('popup/open',{
			  cancel(res) {
			  	console.log('点击取消回调：', res)
			  }
			})
		},
		// 确定回调
		showPopup11() {
			this.$store.dispatch('popup/open',{
			  confirm(res) {
			  	console.log('点击确定回调：', res)
			  },
			})
		},
	}
};
</script>

<style>
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.logo {
	height: 200rpx;
	width: 200rpx;
	margin-top: 200rpx;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50rpx;
}

.text-area {
	/* display: flex; */
	/* justify-content: center; */
}

.title {
	font-size: 36rpx;
	color: #8f8f94;
}
</style>
